<template>
  <el-container style="padding: 15px">
    <el-header height="180px">
      <el-form size="small" label-width="80px">
        <el-row type="flex" align="center">
          <el-col :span="4">
            <el-form-item label="不动产类型" label-width="90px">
              <el-select v-model="searchObj.projectId">
                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="项目编号">
              <el-input v-model="searchObj.reportId" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="项目名称">
              <el-input v-model="searchObj.reportName" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="名称重复">
              <el-select v-model="searchObj.reportRepetition">
                <el-option :value="true" :label="'是'" />
                <el-option :value="false" :label="'否'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="估价师">
              <el-select v-model="searchObj.valueUserId" clearable filterable>
                <el-option v-for="item in valuerList" :key="item.id" :label="item.account" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row type="flex" align="center">
          <el-col :span="5">
            <el-form-item label="用途">
              <el-select v-model="searchObj.useId">
                <el-option v-for="item in useList" :key="item.id" :label="item.reportUseName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="估价目的">
              <el-select v-model="searchObj.objectiveId">
                <el-option v-for="item in objectiveList" :key="item.id" :label="item.reportObjectiveName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="资料齐全">
              <el-select v-model="searchObj.accessory">
                <el-option :value="true" :label="'是'" />
                <el-option :value="false" :label="'否'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!--            <el-form-item label="归档状态">-->
            <!--              <el-select v-model="searchObj.file" clearable>-->
            <!--                <el-option :value="1" :label="'是'" />-->
            <!--                <el-option :value="2" :label="'否'" />-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
            <el-form-item label="审核状态">
              <el-select v-model="searchObj.leafId" multiple>
                <el-option v-for="item in leafList" :key="item.id" :label="item.leafName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="出具日期">
              <el-date-picker
                v-model="searchObj.startTime"
                value-format="timestamp"
                type="date"
                placeholder="开始时间"
                @change="startTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-date-picker
                v-model="searchObj.endTime"
                value-format="timestamp"
                type="date"
                placeholder="结束时间"
                @change="EndTimeChangeHandler"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" align="center">
          <el-col :span="4">
            <el-form-item label="是否收费">
              <el-select v-model="searchObj.charge" style="width: 100%" clearable filterable>
                <el-option :value="true" :label="'是'" />
                <el-option :value="false" :label="'否'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否归档">
              <el-select v-model="searchObj.file">
                <el-option :value="1" :label="'是'" />
                <el-option :value="0" :label="'否'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="收费时间">
              <el-date-picker
                v-model="searchObj.payTime"
                value-format="timestamp"
                type="date"
                placeholder="开始时间"
                @change="startTimePay"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-date-picker
                v-model="searchObj.endPayTime"
                value-format="timestamp"
                type="date"
                placeholder="结束时间"
                @change="EndTimePay"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="center" justify="center">
          <el-col :span="4">
            <el-button type="primary" size="small" @click="getList">搜索</el-button>
            <el-button size="small" @click="resetPage">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-divider />
    <el-main>
      <el-form size="small">
        <el-row type="flex">
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" :loading="downloadingButtonLoding" @click="download">下载</el-button>
              <!--              <el-button type="warning" @click="tableHeadSetDialogVisible = true">表头设置</el-button>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="reportList">
        <el-table-column v-for="item in dynamicTableHeadList" :key="item.prop" :label="item.label" :prop="item.prop" :show-header="item.showHead" width="200px" />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { validObj } from '@/utils/validate'
import { downloadStatistics, getDynamicTableHead, getSearchFormList, getStatisticsPage } from '@/api/statistics'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  data() {
    return {
      reportList: [],
      dynamicTableHeadList: [],
      leafList: [],
      searchObj: {},

      projectList: [],
      valuerList: [],
      useList: [],
      objectiveList: [],

      startTime: '',
      endTime: '',
      currentPage: 1,
      sizePage: 10,
      totalPage: 0,

      downloadingButtonLoding: false

    }
  },

  created() {
    this.init()
  },

  computed: {
    ...mapGetters([
      'id'
    ])
  },

  methods: {
    init() {
      this.getTableHead()
      this.getSearchForm()
      this.getList()
    },
    handleSizeChange(val) {
      this.sizePage = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    getTableHead() {
      getDynamicTableHead().then(res => {
        this.dynamicTableHeadList = res.data.head
      })
    },
    getList() {
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      const searchObj = this.searchObj
      getStatisticsPage('personal', currentPage, sizePage, searchObj).then(res => {
        this.reportList = res.data.list
        this.totalPage = res.data.total
      })
    },

    download() {
      this.searchObj.operationName = this.id
      const searchObj = this.searchObj
      if (validObj(searchObj)) {
        this.downloadingButtonLoding = true
        downloadStatistics('personal', searchObj).then(res => {
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '统计报表.xlsx')
          document.body.appendChild(link)
          link.click()
          this.downloadingButtonLoding = false
        }).finally(() => {
          this.downloadingButtonLoding = false
        })
      } else {
        this.$message.warning('搜索信息不能为空')
      }
    },

    getSearchForm() {
      getSearchFormList().then(res => {
        this.projectList = res.data.projects
        this.valuerList = res.data.users
        this.useList = res.data.uses
        this.objectiveList = res.data.objectives
        this.leafList = res.data.leaf
      })
    },
    startTimeChangeHandler(val) {
      this.reportCommonObj.startTime = val
    },
    EndTimeChangeHandler(val) {
      this.reportCommonObj.endTime = val
    },

    resetPage() {
      this.searchObj = {}
      this.currentPage = 1
      this.getList()
      // 重置成功提示框
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>

</style>
